<template>
  <div class="detailpannel" v-show="showpanel">
    <div v-if="status == 'node-selected'" class="pannel" id="node_detailpannel">
      <div class="pannel-title">节点详情</div>
      <div class="node-detail">
        <div class="node-detail-item flex">
          <div class="node-detail-label">节点名称：</div>
          <div class="node-detail-inner">{{ nodeDetail.name }}</div>
        </div>

        <div class="node-detail-item flex">
          <div class="node-detail-label">节点类型：</div>
          <div class="node-detail-inner">{{ nodeDetail.nodeType }}</div>
        </div>
      </div>

      <ul>
        <li
          label="属性名称"
          prop="name"
          v-for="(item, index) in nodeDetail.propertyStr"
          :key="index"
          class="flex node-detail-item"
        >
          <div class="node-detail-label">{{ item.label }}：</div>
          <div class="node-detail-inner">{{ item.value }}</div>
        </li>
      </ul>
    </div>

    <span style="position: absolute; bottom: 3%; text-align: center; left: 40%">
      <el-button @click="handleClose">关闭</el-button>
    </span>
  </div>
</template>

<script>
import eventBus from '../../utils/eventBus'
import Grid from '@antv/g6/build/grid'
import { getNodeDetail } from '@/api/newknowledge/index.js'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      status: 'canvas-selected',
      showGrid: false,
      page: {},
      graph: {},
      item: {},
      node: {},
      grid: null,
      nodeDetail: {},
      showpanel: false
    }
  },
  created() {
    this.init()
    this.bindEvent()
  },
  computed: {
    ...mapState({
      isUpload: state => state.drawer.isUpload
    })
  },
  methods: {
    init() {},
    bindEvent() {
      let self = this
      eventBus.$on('afterAddPage', page => {
        self.page = page
        self.graph = self.page.graph
      })
      eventBus.$on('nodeselectchange', item => {
        if (item.select === true && item.target.getType() === 'node') {
          self.status = 'node-selected'
          self.item = item.target
          // 可以根据node判断选中的是哪个节点
          self.node = item.target.getModel()
          // if 导入模式，则取消后面的代码执行
          if (this.isUpload === true) return
          this.getNodeDetail(self.node)
        } else {
          self.status = 'canvas-selected'
          self.item = null
          self.node = null
        }
      })
    },
    handleChangeName(e) {
      const model = {
        label: e
      }

      this.graph.update(this.item, model)
    },
    changeGridState(value) {
      if (value) {
        this.grid = new Grid()
        this.graph.addPlugin(this.grid)
      } else {
        this.graph.removePlugin(this.grid)
      }
    },
    getNodeDetail(value) {
      getNodeDetail({ nodeId: value.id }).then(response => {
        if (response.data.code === 500) {
          this.$message.error(response.data.message)
          return
        }
        this.nodeDetail = response.data.data
        // 把false和true都变成带双引号的字符串
        if (this.nodeDetail.propertyStr === null) return
        this.nodeDetail.propertyStr = this.nodeDetail.propertyStr.replace(
          /(?<!")\bFALSE|false\b(?=: )/g,
          '"false"'
        )
        this.nodeDetail.propertyStr = this.nodeDetail.propertyStr.replace(
          /(?<!")\bTRUE|true\b(?=: )/g,
          '"true"'
        )
        this.nodeDetail.propertyStr = JSON.parse(this.nodeDetail.propertyStr)
        const nameIndex = this.nodeDetail.propertyStr.findIndex(
          item => item.label === 'name'
        )
        if (nameIndex !== -1) {
          this.nodeDetail.propertyStr.splice(nameIndex, 1)
        }
        this.showpanel = true
      })
    },
    handleClose() {
      this.showpanel = false
    }
  }
}
</script>

<style scoped>
.detailpannel {
  height: 94%;
  position: absolute;
  right: 0px;
  z-index: 20;
  background: rgba(33, 40, 63, 0.8);
  color: #fff;
  /* background: #f7f9fb; */
  width: 300px;
  overflow: auto;
  border-left: 1px solid #e6e9ed;
}

.detailpannel .block-container {
  padding: 16px 8px;
}

.block-container .el-col {
  height: 28px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.pannel {
  height: calc(100% - 10%);
  overflow: auto;
}

.pannel-title {
  height: 32px;
  border-top: 1px solid #dce3e8;
  border-bottom: 1px solid #dce3e8;
  background: rgba(33, 40, 63, 0.8);
  color: #fff;
  line-height: 28px;
  padding-left: 12px;
}
.node-detail-item {
  padding: 12px 0;
  font-size: 14px;
}
.node-detail-label {
  width: 110px;
  display: inline-block;
  text-align: right;
}
.node-detail-inner {
  width: 120px;
  display: inline-block;
}
</style>
